<template>
  <NlyDocsMain>
    <NlyDocsSection tag="header">
      <h1 :id="id" class="nly-no-focus-ring" tabindex="-1">
        <span class="bd-content-title">
          {{ groupTitle }}
          <span class="small text-muted">- 内容</span>
        </span>
      </h1>
      <p v-if="groupDescription" class="bd-lead">{{ groupDescription }}</p>
    </NlyDocsSection>
    <NlyDocsSection>
      <nly-list-group
        tag="nav"
        :aria-label="`${groupTitle} section navigation`"
        class="mb-5"
      >
        <nly-list-group-item
          v-for="page in pages"
          :key="page.slug"
          :to="`/docs/${slug}/${page.slug}`"
          active-class=""
        >
          <strong class="text-primary">{{ page.title }}</strong> &mdash;
          <nly-badge v-if="page.new" variant="success">新增</nly-badge>
          <span class="text-muted">{{ page.description }}</span>
          <nly-badge v-if="page.version" variant="secondary"
            >v{{ page.version }}</nly-badge
          >
        </nly-list-group-item>
      </nly-list-group>
    </NlyDocsSection>
  </NlyDocsMain>
</template>

<style scoped>
.list-group .list-group-item:hover strong {
  text-decoration: underline;
}
</style>

<script>
import NlyDocsMain from "~/components/nly-docs-main";
import NlyDocsSection from "~/components/nly-docs-section";
import { nav } from "~/content";

// Normalize nav into a lookup object
const groups = nav.reduce((obj, g) => {
  const groupSlug = g.base.replace(/\/$/, "");
  obj[groupSlug] = g;
  return obj;
}, {});

export default {
  name: "NlyDocsSectionToc",
  layout: "docs",
  components: {
    NlyDocsMain,
    NlyDocsSection
  },
  computed: {
    slug() {
      return this.$route.path.replace(/^\//, "").split("/")[1] || "";
    },
    id() {
      return `bd-section-toc-${this.slug}`;
    },
    group() {
      return groups[this.slug] || {};
    },
    groupDescription() {
      return this.group.description;
    },
    groupTitle() {
      const title = this.group.title || "";
      return title === "Components"
        ? "Component groups"
        : title === "Misc"
        ? "Miscellaneous"
        : title || "";
    },
    pages() {
      return this.group.pages || [];
    }
  }
};
</script>
